/*
 * 店铺视图
 * @Author: ljb
 * @Date: 2018-03-27 17:52:07
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-12 09:43:39
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
	@deep: ~">>>";
    .v-customer-store-views {
        padding: 20px;
        .preview-image {
            display: block;
            margin-top: 10px;
        }
	}
	@{deep} .ivu-modal-body{
		min-height: 460px;
	}

</style>

<template>

	<div class="v-customer-store-views">

		<Tabs
			type="card"
			@on-click="changeTab">

			<TabPane
				:label="$t('common.create')"
				name="新增">

				<store-create
					ref="create"

					@post="postData"/>

			</TabPane>

			<TabPane
				:label="$t('common.check')"
				name="查看">

				<search-form @search="confirmSearch"/>

				<store-index
					:loading="table_loading"
					:stores="customer_store.data"
					:fetch-store-token-once="fetchStoreTokenOnce"
					@edit="customerStoreDetail"
					@ban="banStore"
					@recovery="recoveryStore"
				/>

				<br>

				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="customer_store.total"
						:current="customer_store.current_page"
						:page-size="query_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"/>
				</Row>

			</TabPane>

		</Tabs>

		<Modal
			v-model="show_modal"
			:title="$t('store.store_info')"
			class-name="vertical-middle-modal">

			<!-- 店铺编辑组件 -->
			<store-edit
				v-if="show_modal"
				:customer-store-detail="customer_store_detail"
				:show-modal="show_modal"
				@update="updateCustomerStore"/>

			<div slot="footer"/>

		</Modal>

	</div>

</template>

<script>

import API_LIST from 'src/API_LIST';

import { mapMutations, mapGetters } from 'vuex';

import qs from 'qs';

import storeCreate from './create';
import storeIndex from './index';
import storeEdit from './edit';

import searchForm from './search-form';


export default {

	name: 'CustomerStoreViews',

	components: {
		storeCreate,

		storeIndex,

		storeEdit,

		searchForm,
	},
	data() {
		return {

			query_info: {
				page: 1,

				per_page: 20,

				keyword: '',
			},

			search_info: {
				page: 1,

				per_page: 20,
			}, // 分页信息

			table_loading: false, // 表格更新时的loading

			show_modal: false, // 弹框的控制

			customer_store_detail: {}, // 店铺详情

			customer_store: {}, // 店铺信息

		};
	},
	computed: {
		...mapGetters('userToken', [
			'getUserId',
		]),
	},

	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
         * 切换tab
         * @param  {string} tab_name {tab的name}
         * @return {undefined}
         */
		changeTab(tab_name) {
			if (tab_name === '查看') {
				this.fetchCustomerStoreList(this.query_info);
			} else {
				this.customer_store.data = [];
			}
		},

		/**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined}
         */
		pageChange(pageNumber) {
			this.search_info.page = pageNumber;

			this.search_info.per_page = this.query_info.per_page;

			this.fetchCustomerStoreList(this.search_info);
		},

		/**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
		perPageChange(per_page) {
			this.search_info.per_page = per_page;

			this.query_info.per_page = per_page;

			this.fetchCustomerStoreList(this.query_info);
		},

		/**
         * 确认搜索
         * @param  {Object} param {搜索的参数对象}
         * @return {undefined}
         */
		confirmSearch(param) {
			this.query_info.keyword = param.keyword;

			this.search_info = JSON.parse(JSON.stringify(this.query_info));

			this.fetchCustomerStoreList(this.query_info);
		},

		/**
         * 新增店铺的post数据
		 * @param {Object} param {create传参的对象}
         * @return {undefined}
         */
		postData(param) {
			this.showSpin(this.$t('common.please_wait'));

			this.$http.post(API_LIST.CUST_STORE, param)

				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.create_success'));

					this.$refs.create.handleReset('formValidate');
				})

				.catch((err) => {
					this.$Message.error(err.message);
				})
				.then(this.closeSpin);
		},

		/**
         * 获取店铺详情
         * @param  {Object} detail {当前查看的职员信息}
         * @return {undefined}
         */
		customerStoreDetail(detail) {
			this.customer_store_detail = detail;

			this.show_modal = true;
		},

		/**
         * 更新店铺信息
         * @param  {string} id    {需要更新的店铺的id}
         * @param  {Object} param {需要的参数对象}
         * @return {undefined}
         */
		updateCustomerStore(id, param) {
			this.showSpin(this.$t('common.please_wait'));

			this.$http.post(`${API_LIST.CUST_STORE}/${id}`, param)

				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.update_success'));

					this.show_modal = false;

					this.fetchCustomerStoreList(this.search_info);
				})

				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},

		/**
         * 获取店铺列表
         * @param  {Object} param {搜索列表的参数}
         * @return {undefined}
         */
		fetchCustomerStoreList(param) {
			this.table_loading = true;

			const query_str = qs.stringify(param);

			this.$http.get(`${API_LIST.CUST_STORE}?${query_str}`)

				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.customer_store = data.stores;
				})

				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})

				.then(() => { this.table_loading = false; });
		},

		/**
         * 禁用店铺
         * @param  {Object} row {店铺对象}
         * @return {undefined}
         */
		banStore(row) {
			this.table_loading = true;

			const param = {
				is_deleted: 1,

				_method: 'PATCH',
			};

			this.$http.patch(`${API_LIST.CUSTOMER_STORE_DELETE}/${row.id}`, param)

				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);
					/* eslint-disable-next-line no-param-reassign */
					row.is_deleted = 1;

					this.$Message.success(this.$t('store.disable_success'));
				})

				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})

				.then(() => { this.table_loading = false; });
		},

		/**
         * 启用店铺
         * @param  {Object} row {店铺对象}
         * @return {undefined}
         */
		recoveryStore(row) {
			this.table_loading = true;

			const param = {

				is_deleted: 0,

				_method: 'PATCH',

			};

			this.$http.patch(`${API_LIST.CUSTOMER_STORE_DELETE}/${row.id}`, param)

				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);
					/* eslint-disable-next-line no-param-reassign */
					row.is_deleted = 0;

					this.$Message.success(this.$t('store.enable_success'));
				})

				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})

				.then(() => { this.table_loading = false; });
		},

		/**
		 *  请求一次性的 store token
		 *  @param {Number} store_id {店铺id}
		 *  @return {undefined}
		 */
		fetchStoreTokenOnce(store_id) {
			this.showSpin(this.$t('common.please_wait'));
			return this.$http.post(API_LIST.ONE_TIME_TOKEN, {
				type: 'store',
				id: store_id,
			})
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						return data.token;
					}
				})
				.catch((error) => {
					this.$Message.error(error.message);
				})
				.then((token) => {
					this.closeSpin();
					return token;
				});
		},
	},
};
</script>
